<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./index.css">
  <title>导航跟随效果</title>
</head>
<body>
  <div class="box">
    <div class="weapon-box">
      <!-- 上: 导航栏 -->
      <ul class="nav">
        <li data-id="0" class="active">武器</li>
        <li data-id="1">宠物</li>
        <li data-id="2">坐骑</li>
        <li data-id="3">套装</li>
        <li data-id="4">衣服</li>
        <!-- 游标 -->
        <div class="line"></div>
      </ul>

      <!-- 下: 内容显示区域 -->
      <div class="content">
        <div class="item active">武器</div>
        <div class="item">宠物</div>
        <div class="item">坐骑</div>
        <div class="item">套装</div>
        <div class="item">衣服</div>
      </div>
    </div>
  </div>

  <script>
    // 3. JS逻辑
    // 核心思路: “排他思想”
    const nav = document.querySelector('.box .nav')
    const line = document.querySelector('.line')
    const items = document.querySelectorAll('.content .item')

    // 3.1 事件委托
    nav.addEventListener('click', function (e) {
      // console.log('click: ', e.target.tagName);

      // 3.2 只有点了 li 标签, 才有触发操作
      if (e.target.tagName === 'LI') {
        // 一、先排类
        document.querySelector('.box .nav .active').classList.remove('active')
        // 二、再加上
        e.target.classList.add('active')

        // 3.3 处理游标显示位置:
        // console.log(e.target.offsetParent) // 3.4 测试查看 每个tab项 对应的(有定位)父亲是谁
        // console.log(e.target.offsetLeft)
        line.style.transform = `translateX(${e.target.offsetLeft}px)`

        // 3.4 切换Tab项, 关联显示下方内容:
        // console.log(e.target.dataset.id)
        document.querySelector('.content .active').classList.remove('active')

        // 3.5(分析) ✨核心点就在于 ->先给每个Tab项设置 “自定义属性(标识)”
        // 接着, 获取所有 item(伪数组), (标识)正好对应上此时每个item的index
        items[e.target.dataset.id].classList.add('active')
      }
    })
  </script>
</body>
</html>